<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <form id="formdata">
      <div class="form-group">
        <label for="username">Email address</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
      </div>
      <div class="form-group">
        <label for="upload">UpLoad</label>
        <input type="file" class="form-control" id="upload" name="file">
        <button type="button" id="up-btn" class="btn btn-default">Confirm</button>
    </div>
      <button type="submit" id="sub-btn" class="btn btn-default">Submit</button>
    </form>
    <div id="showTips"></div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            /*
            formdata表单提交
             */
            $('#sub-btn').click(function(event) {
                var formData = new FormData($('#formdata')[0]);//一定要加[0],吧参数转化为DOM对象
                event.preventDefault();
                $(function(){
                    $.ajax(
                        {
                            type:'post',
                            url : 'http://test2.com/formdata.php',
                            data:formData,//提交的数据为表单
                            cache: false,
                            contentType: false,
                            processData: false,
                            dataType:"json",
                            success  : function(data) {
                                var html = "<div>用户名："+ data.user+"</div>";
                                html +=  "<div>密码："+ data.pass+"</div>";
                                $("#showTips").html(html);
                            },
                            error : function() {
                                $("#showTips").html('error connect!');
                            },
                            complete:function () {
                                $('#username').val("");
                                $('#password').val("")
                            }
                        }
                    );
                });

            });

            /*
            文件上传
             */
            $('#upload').change(function(event) {
                $('#up-btn').click(function(event) {
                    event.preventDefault();
                    var formData = new FormData();
                    formData.append('file',$('#upload')[0].files[0]);

                      $(function(){
                        $.ajax(
                            {
                                type:'post',
                                url : 'http://test2.com/upload.php',
                                data:formData,//提交的数据为表单
                                cache: false,
                                contentType: false,
                                processData: false,
                                dataType:"json",
                                success  : function(data) {
                                    var html = "<div>上传文件名："+ data.filename+"</div>";
                                    html +=  "<div>文件大小："+ data.filesize+"kb</div>";
                                    html +=  "<div>文件临时存储的位置："+ data.filepath+"</div>";
                                    $("#showTips").html(html);
                                },
                                error : function() {
                                    $("#showTips").html('error connect!');
                                },
                                complete:function () {
                                }
                            }
                        );
                    });

                });

            });

        });
    </script>
</body>
</html>
